<!--A Design by W3layouts 
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
    <title>Sport A Ecommerce Category Flat Bootstarp Resposive Website Template | Home :: w3layouts</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Custom Theme files -->
    <!--theme-style-->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <!--//theme-style-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="Sport Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!--fonts-->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
    <!--//fonts-->
    <!--    <link rel="stylesheet" href="css/index.css" />-->
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=sHkKJTcoBcHOGH0mHWkM3TD0QBqfLuWA"></script>

</head>
<body>
<div id="app">
    <div class="line">

    </div>
    <div class="header">
        <div class="logo">
            <a href="index.html"><img src="images/logo.png" alt=""></a>
        </div>
        <div class="header-top">
            <div class="header-grid">
                <ul class="header-in">
                    <li><a href="account.html">我的账户 </a></li>
                    <li>
                        <select class="in-drop">
                            <option value="Yuan" class="in-of">人民币</option>
                            <option value="Dollars" class="in-of">美元</option>
                            <option value="Euro" class="in-of">欧元</option>
                        </select>
                    </li>
                </ul>
                <div class="search-box">
                    <!--                    <div id="sb-search" class="sb-sea rch" :class="{sb-search-open:isSearch==false , :isSearch==true}">-->
                    <div id="sb-search" class="sb-search" :class="{ 'sb-search-open': isSearch }">
                        <form>
                            <input class="sb-search-input" placeholder="输入您的搜索词..." type="search" name="search"
                                   id="search">
                            <input class="sb-search-submit" type="button" value="" @click="isSearch=!isSearch">
                            <!--                                <input class="sb-search-submit" type="submit" value="">-->
                            <span class="sb-icon-search"> </span>
                        </form>
                    </div>
                </div>
                <div class="online">
                    <a href="single.html">网上购物</a>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="header-bottom">
                <div class="h_menu4"><!-- start h_menu4 -->
                    <a class="toggleMenu" href="#">Menu</a>
                    <ul class="nav">
                        <li class="active" v-for="(item,index) in sstyle" :key="index"
                            @click="findStyleShoes(item.styleid)">
                            <a :href="'product.html#'+item.styleid">{{item.style}}</a>
                        </li>
                        <li><a href="product.html">更多 <i> </i></a>
                            <ul>
                                <li><a href="cart.html">购物车</a></li>
                                <li><a href="account.html">账户</a></li>
                                <li><a href="register.html">注册</a></li>
                            </ul>
                        </li>
                    </ul>

                </div><!-- end h_menu4 -->
                <ul class="header-bottom-in">
                    <li>
                        <select class="drop">
                            <option value="Yuan" class="in-of">活跃起来</option>
                            <option value="Euro" class="in-of">活跃起来1</option>
                            <option value="Dollars" class="in-of">活跃起来2</option>
                        </select>
                    </li>
                    <li>
                        <select class="drop">
                            <option value="Yuan" class="in-of">社区</option>
                            <option value="Euro" class="in-of">社区1</option>
                            <option value="Dollars" class="in-of">社区2</option>
                        </select>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    <!---->
    <div class="container">
        <div class="account">

            <h2>账户</h2>
            <div class="account-pass">
                <div class="col-md-7 account-top" v-if="loginStatus===0">
                    <form>
                        <div>
                            <span>用户名</span>
                            <input type="text" name="username" id="username" v-model="username">
                        </div>
                        <div>
                            <span>密码</span>
                            <input type="password" type="password" name="pwd" id="pwd" v-model="pwd">
                        </div>
                        <div>
                            <span>验证码</span>
                            <input type="text" name="code" id="code" v-model="valcode">
                            <img src="code.action" id="yzm_img"/>
                        </div>
                        <input type="submit" value="登录" @click="login">
                    </form>
                </div>

                <div class="col-md-7 account-top" v-else>
                    <!--                    <div>-->
                    <span>用户名：{{username}}</span>
                    <!--                    </div>-->
                    <!--                    <div>-->
                    <span>邮箱：{{email}}</span>
                    <!--                    </div>-->
                    <div id="myaddress" style="display: none"></div>
                    <span>收货地址:{{address}}</span><input type="button" @click="getMyAddress" value="点击获取当前位置">
                    <div>
                        <table>
                            <thead>
                            <tr>
                                <th>订单编号</th>
                                <th>商品</th>
                                <th>商品价格</th>
                                <th>购买数量</th>
                                <th>支付状态</th>
                                <th>发货状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item,index) in ShoesStatues" :key="index">
                                <td>
                                    {{item[0].oid}}
                                </td>
                                <td>
                                    <p v-for="(item1,index) in item" :key="index">
                                        <img :src="item1.photourl" height="50px">{{item1.sdescription}}
                                    </p>
                                </td>
                                <td>${{calculateCartPrice(item)}}</td>
                                <td>{{calculateNumItems(item)}}</td>
                                <td>
                                    <!--<a :href="'product.html#'+item.styleid">{{item.style}}</a>-->
                                    <button type="button"><a
                                            :href="'index.jsp#'+item[0].oid">{{item[0].paymentstatus}}</a></button>
                                </td>
                                <td>{{item[0].orderstatus}}</td>
                                <td>
                                    <button type="button" @click="sign(item[0].oid)">签收</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="col-md-5 left-account " v-if="loginStatus===0">
                    <a href="single.html"><img class="img-responsive " src="images/ac.png" alt=""></a>
                    <div class="five">
                        <h1>25% </h1><span>discount</span>
                    </div>
                    <a href="register.html" class="create">Create an account</a>
                    <div class="clearfix"></div>
                </div>
                <!--历史记录栏-->
                <div class="history-bar" v-if="loginStatus!=0">
                    <div class="history-title">足迹</div>
                    <ul class="history-list">
                        <li v-for="(item,index) in history" :key="index">
                            <a :href="'single.html#' + item.sid"><img :src="item.photourl"
                                                                      height="50px">{{item.sdescription}}</a>
                            <span class="time">2 小时前</span>
                        </li>
                        <!-- 更多历史记录项 -->
                    </ul>
                </div>

                <div class="clearfix"></div>
            </div>
        </div>

    </div>
    <!---->
    <!--footer-->
    <div class="footer">
        <div class="col-md-3 footer-left">
            <h4>体育</h4>
            <div class="run-top">
                <ul class="run-grid">
                    <li><a href="#">运动</a></li>
                    <li><a href="#">循环</a></li>
                    <li><a href="#">铁人三项</a></li>
                    <li><a href="#">健康</a></li>
                    <li><a href="#">网球</a></li>
                    <li><a href="#">更多运动</a></li>
                </ul>
                <ul class="run-grid">
                    <li><a href="#">风格</a></li>
                    <li><a href="#">特殊</a></li>
                    <li><a href="#">品牌活动</a></li>
                </ul>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-md-3 footer-left left-footer">
            <h4>最近的</h4>
            <div class="run-top top-run">
                <ul class="run-grid">
                    <li><a href="#">新闻 & 活动</a></li>
                    <li><a href="#">社区</a></li>
                    <li><a href="#">视频</a></li>
                    <li><a href="#">购物</a></li>
                    <li><a href="#">赞助</a></li>
                    <li><a href="#">更多运动</a></li>
                </ul>
                <ul class="run-grid">
                    <li><a href="#">俱乐部 & 培训 </a></li>
                    <li><a href="#">活动地图</a></li>
                    <li><a href="#">挑战世界</a></li>
                </ul>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-md-2 footer-left left-footer">
            <h4>您的账户</h4>
            <ul class="run-grid-in">
                <li><a href="account.html">登录</a></li>
                <li><a href="#">我的运动</a></li>
                <li><a href="#">我的活动</a></li>
            </ul>
        </div>
        <div class="col-md-4 footer-left left-footer">
            <ul class="social-in">
                <li><a href="#"><i> </i></a></li>
                <li><a href="#"><i class="youtube"> </i></a></li>
                <li><a href="#"><i class="facebook"> </i></a></li>
                <li><a href="#"><i class="twitter"> </i></a></li>
            </ul>
            <div class="letter">
                <h5>通讯</h5>
                <span>在下一篇文章中</span>
                <h6>NRL：本周末我们学到的五件事</h6>
                <p>支持郊区游戏;勇士撕裂</p>
                <a href="register.html" class="sign">注册并获取更多</a>
                <p class="footer-class"> © 2015 Sport 版权所有 |<a href="http://w3layouts.com/" target="_blank">W3layouts</a>的模板
                </p>
            </div>

        </div>
        <div class="clearfix"></div>
    </div>
</div>

<!-- search-scripts -->
<script src="js/classie.js"></script>
<script src="js/uisearch.js"></script>
<!-- //search-scripts -->
<script type="text/javascript" src="js/nav.js"></script>

<script src="js/jquery-1.9.1.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script type="text/javascript">
    let vm = new Vue({
            el: "#app",
            //model数据
            data: {
                //注册与登录数据
                username: 'joker',
                pwd: 'a',
                valcode: '',	//验证码
                email: '',
                new_pwd1: '',
                new_pwd2: '',
                isSearch: false,     //搜索框显示状态
                isLogin: false,		//记录当前登录状态
                loginStatus: 0,	//登录界面显示情况
                changepwdflag: false,
                sstyle: [],	//商品类型
                ShoesStatues: [//已下单的商品状态
                    {oid: '', paymentstatus: '', orderstatus: ''},
                ],

                history: [], //历史记录

                address: '',//当前位置
            },
            methods: {
            getMyAddress:function() {
                var map = new BMap.Map("myaddress"); // 创建Map实例
                var point = new BMap.Point(116.331398, 39.897445);
                map.centerAndZoom(point, 12); //初始化地图,用一经纬度坐标设置地图中心点

                var geolocation = new BMap.Geolocation();
                geolocation.getCurrentPosition(function(r) {
                    if(this.getStatus() == BMAP_STATUS_SUCCESS) {
                        getAddress(r.point)
                        var ggPoint = new BMap.Point(r.point.lat, r.point.lng); //转化坐标
                        var map = new BMap.Map("myaddress");
                        map.centerAndZoom(ggPoint, 15);
                        console.log(ggPoint);
                        //添加marker
                        var markergg = new BMap.Marker(ggPoint);
                        map.addOverlay(markergg); //添加GPS marker
                        var labelgg = new BMap.Label("", {
                            offset: new BMap.Size(20, -10)
                        }); //显示当前区域
                        markergg.setLabel(labelgg); //添加GPS label
                        console.log(markergg);
                        //添加控件
                        map.addControl(new BMap.NavigationControl()); //平移缩放控件
                        map.addControl(new BMap.ScaleControl()); //比例尺
                        map.addControl(new BMap.OverviewMapControl()); //缩略地图
                        map.addControl(new BMap.MapTypeControl()); //地图类型
                        var point = new BMap.Point(markergg.point.lat, markergg.point.lng); //根据经纬度设置中心点坐标
                        map.centerAndZoom(point, 15);
                        //获取地址信息，设置地址label
                        function getAddress(point) {
                            var geocoder= new BMap.Geocoder();
                            geocoder.getLocation(point, function(addComp ) {
                                var addComp = addComp.addressComponents;
                                var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber; //获取地址
                                setTimeout(function(){
                                    // alert("您当前所在位置是：" + address);
                                    vm.$data.address=address;
                                }, 1000);
                            });
                        }
                    }
                });

            },
            // 历史记录刷新,前端页面渲染未完成
            getHistory: function () {
                axios.post("historical.action?op=getHistory").then(result => {
                    var jm = result.data;
                    this.history = [];
                    if (jm.code == 1) {
                        this.history = result.data.obj;
                    }
                })
            },
            //单个计算总价
            calculateCartPrice(item) {
                var cartprice = 0;
                item.forEach((item1, index) => {
                    cartprice += item1.dealprice * item1.num;
                });
                return cartprice;
            },
            //单个计算总数量
            calculateNumItems(item) {
                var num = 0;
                item.forEach((item1, index) => {
                    num += item1.num;
                });
                return num;
            },
            //沙箱支付
            payStatus: function () {
                const url = new URL(window.location.href);
                // 获取URL参数
                const params = new URLSearchParams(url.search);
                // 获取alipaystatus参数的值
                var alipayStatus = params.get('alipaystatus');

                var subjectValue = params.get('subject');


                // alert("alipaystatus:"+alipayStatus+"  subject:"+subjectValue);

                if (alipayStatus == 1) {
                    this.changePayStatus(subjectValue);
                    this.findShoesStatus();
                }
            },
            //支付成功：修改支付状态
            changePayStatus: function (oid) {
                var params = new URLSearchParams();
                params.append("oid", oid);
                axios.post('alipay.action?op=changePayStatus', params).then(result => {
                    let jm = result.data;
                    if (jm.code == 1) {
                    }
                });
            },
            //签收
            sign: function (oid) {
                var params = new URLSearchParams();
                params.append("oid", oid);
                axios.post('order.action?op=sign', params).then(result => {
                    if (result.data.code == 1) {
                        console.log("签收成功........");
                        this.findShoesStatus();
                    } else {
                        alert("未支付，请先支付");
                    }

                });
            },
            //登录
            login: function () {
                var params = new URLSearchParams();
                params.append("username", this.username);
                params.append("pwd", this.pwd);
                params.append("valcode", this.valcode);
                axios.post('user.action?op=login', params).then(result => {
                    let jm = result.data;
                    if (jm.code == 0) {
                        alert("登录失败，原因" + jm.error);
                        return;
                    }
                    alert("登陆成功....");
                    this.username = result.data.obj.username;
                    this.email = jm.obj.email;
                    this.isLogin = true;
                });
            },
            //退出登录(未完成)
            logout: function () {
                axios.get('user.action?op=logout').then(result => {
                    this.isLogin = false;
                });
            },
            //登录状态
            checkLogin: function () {
                return axios.get("user.action?op=checkLogin");
            },
            //显示商品分类栏
            findStyle: function () {
                return axios.get("shoes.action?op=findStyle");
            },
            //点击分查询
            findStyleShoes: function (styleid) {
                var params = new URLSearchParams();
                // 获取片段标识符部分，即 '#item.sid'
                // var fragment = window.location.hash;
                // // 去除 '#' 符号
                // var styleid = fragment.substring(1); // 去除 '#' 符号
                // console.log("Received sid value:", sid);
                params.append("styleid", styleid);
                axios.post("shoes.action?op=findStyleShoes", params).then(result => {
                    vm.$data.shoes = result.data.obj;
                });
            },
            //已下订单的状态表
            findShoesStatus: function () {
                var params = new URLSearchParams();
                return axios.post('order.action?op=findShoesStatus', params);
            },
            //显示表格并计算总价和数量
            showCartInfo: function (cart) {
                this.ShoesStatues = cart;
                // alert("显示表中数据："+this.ShoesStatues);
            },
        },
        mounted
    :

    function () {
        axios.all([this.checkLogin(), this.findStyle(), this.findShoesStatus()]).then(
            axios.spread((d1, d2, d3) => {
                this.payStatus();
                this.findStyleShoes(this.sstyle.styleid);
                if (d1.data.code == 1) {
                    //vm.$data.指的是model中的数据
                    //this.username:这是view-model中的数据
                    vm.$data.username = d1.data.obj.username;
                    vm.$data.email = d1.data.obj.email;
                    vm.$data.isLogin = true;
                    vm.$data.loginStatus = 1;
                }
                if (d2.data.code == 1) {
                    vm.$data.sstyle = d2.data.obj;
                }

                if (d3.data.code == 1) {
                    this.showCartInfo(d3.data.obj);
                }
                this.getHistory();
                setInterval(() => {
                    this.getHistory();
                }, 3000); // 每隔三秒执行一次getHistory方法,自动刷新历史记录

            })
        );
    }

    ,
    })
    ;


</script>
</body>
</html>